<template>
  <div>
    <van-uploader
    v-model="fileList"
    max-size="5*1024*1024"
    :capture="camera"
    :after-read="uploadImgs"
    :preview-image=false
    ref="loadimg"
    >
      <div class="topic">{{123}}</div>        
    </van-uploader>
  </div>
</template>
<script>
import {uploadFile} from '@/api/index'
import axios from 'axios'
export default{
  data(){
    return {
      fileList:[]
    }
  },
  props:{
    text:{
      type:String,
      default: () => {}
    },
    camera:{
      type:String,
      default: () => {}
    },
    type: {
      type: String,
      default: () => {}
    },
    MaxCount:{
      type: Number,
      default: () => {return 1}
    }
  },
  computed: {

  },
  methods: {
    //可以上传的代码
    // afterRead(file) {
    //   // 此时可以自行将文件上传至服务器
    //   console.log(file);  
    //   // let formData = new FormData();
    //   // formData.append('img',file.file);    
    //   // this.upImg(formData)

    // },
    async upImg (file) {
      // const res = await axios.post('/api/upload/img',file),
      //可以使用原生axios提交数据，解决数据提交问题
      //const res = await uploadFile(file)
      const res = await uploadFile(file)
      if(res.status === 200) {
        console.log(res)
        this.$toast(res.msg)
        //上传成功通过子传父把值给父组件
        this.$emit('onSuccess',res)
      }else{
        this.$toast(res.msg)  
      }
    },
  //对图片缩小上传
   uploadImgs(file) {
     console.log(file);
    //  获取图片名字的格式，jpg，png？
    let typeName = file.file.name.split('.')[1]
      // 大于2.5MB的jpeg和png图片都缩小像素上传
      if (/\/(?:jpeg|png|jpg)/i.test(file.file.type) && file.file.size > 2*1024*1024) {
        // 创建Canvas对象(画布)
        let canvas = document.createElement("canvas");
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext("2d");
        // 创建新的图片对象
        let img = new Image();
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = file.content;
        // 监听浏览器加载图片完成，然后进行进行绘制
        img.onload = () => {
          // 指定canvas画布大小，该大小为最后生成图片的大小
          canvas.width = 800;
          canvas.height = 600;
          /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
        如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/

          context.drawImage(img, 0, 0, 800, 600);
          // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
          file.content = canvas.toDataURL(file.file.type, 0.92);
          // 最后将base64编码的图片保存到数组中，留待上传。
 
          //把压缩后的base64转换成图片file数据格式，然后用formdata格式上传
          let a = this.base64ToFile(file.content, typeName)
          let formData = new FormData();
          formData.append('img',a);  
          this.upImg(formData)
        };
      }else{
          let formData = new FormData();
          formData.append('img',file.file);
          this.upImg(formData) 
        }
   },
   //base64转文件格式
   base64ToFile(data, typeName) {      
　　// 将base64 的图片转换成file对象上传 atob将ascii码解析成binary数据
      let binary = atob(data.split(',')[1]);
      let mime = data.split(',')[0].match(/:(.*?);/)[1];
      let array = [];
      for (let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      let fileData = new Blob([new Uint8Array(array)], {
            type: mime,
      });
      let file = new File([fileData], `${new Date().getTime()}.${typeName}`, { type: mime });
      return file;
    },

  }
}
</script>
<style lang='less' scoped>
.topic {
  width:100%;
  height:56px;
  line-height: 56px;
  color: #FF3B30;
  text-align: center;
  font-size: 16px;
  letter-spacing:4px;
  background-color:rgba(252,252,252,0.8);
  border-radius:0px 0px 13px 13px;
}
.toPhoto {
  width:355px;
  height:57px;
  line-height: 57px;
  background:rgba(252,252,252,0.8);
  border-radius:13px 13px 0px 0px;
}
</style>